<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 移动位置的几种方法： 定位 盒子外边距 2D转换移动translate */
				width: 300px;
				height: 300px;
				background-color: hotpink;
				/* transform: translate(20px,20px); */
				/* 如果只想在x轴或者y轴移动 把另一个值改为0就行了 */
				/* 也可以单独写 */
				transform: translateX(100px);
				transform: translateY(100px);
				/* 这种分开写是只移动x轴或者y轴，不会都生效，注意 */
			}
		</style>
	</head>
	<body>
		
		<h1>学完了transition过渡和translate移动就可以实现小米盒子的上浮效果了,可以实测一下</h1>
		
		<h2>2D转换是改变标签在二维平面上的位置和形状的技术</h2>
		<h1>translate最大的优点是不会影响其他元素的位子</h1>
		<h1>translate中的百分比单位是相对于自身元素的translate(50%,50%);</h1>
		<h1>translate对行内标签没有效果</h1>
		<!-- 网页坐标x轴向右，y轴向下 -->
		<h2>移动变形</h2>
		<!-- 语法：
		transform:translate(x,y);
		或者采用分开写：
		transform:translateX(n);
		
		transform:translateY(n); -->
		<div></div>
	</body>
</html>
